<template>
  <div id="pie" style=" height: 400px"></div>
  <div id="map" style=" height: 400px"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted } from "vue";
import { statApi } from "@/request/api";
import china from "@/json/china.json"
onMounted(() => {
    type EChartsOption = echarts.EChartsOption;
    var chartDom = document.getElementById("pie")!;
  var myChart = echarts.init(chartDom);
  var option: EChartsOption;
  statApi().then((res) => {
    const pieData = res.data.data.salePie;
    const data: any[] = pieData.map((item: { name: any; yesterday_money: any; }) => ({
      name: item.name,
      value: item.yesterday_money,
    }));
    option = {
      // 提示组件，通常就是 鼠标移入的提示信息
      tooltip: {
        trigger: "item",
        backgroundColor: "rgba(0,0,0,.6)",
        textStyle: {
          color: "#fff",
        },
        formatter: "{b}:{c}({d}%)",
      },
      legend: {
        orient: "vertical",
        left: "right",
        height: 100,
      },
      series: [
        {
          type: "pie",
          label: {
            color: "inherit",
          },
          radius: ["40%", "70%"],
          data,
        },
      ],
    };
    option && myChart.setOption(option);
  });


  var mapDom = document.getElementById("map")!;
  var mapChart = echarts.init(mapDom);
  echarts.registerMap("china", china as any);

  mapChart.setOption({
    tooltip: {
      trigger: "item",
      formatter: "{b}<br/>{c} (p / km2)",
    },
    toolbox: {
      show: true,
      orient: "vertical",
      left: "right",
      top: "center",
      feature: {
        dataView: { readOnly: false },
        restore: {},
        saveAsImage: {},
      },
    },
    visualMap: {
      min: 800,
      max: 50000,
      text: ["High", "Low"],
      realtime: false,
      calculable: true,
      inRange: {
        color: ["lightskyblue", "yellow", "orangered"],
      },
    },
    series: [
      {
        type: "map",
        map: "china",
        label: {
          show: true,
        },
        data: [],
      },
    ],
  });

});
</script>

<style scoped></style>
